
<template>
  <div class="box">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 80%">
      <a-form-model-item ref="name" label="活动名称" prop="name">
        <a-input
          :maxLength="16"
          v-model="form.name"
          @blur="
            () => {
              $refs.name.onFieldBlur()
            }
          "
        />
      </a-form-model-item>
      <a-form-model-item label="小程序选择" prop="brandId">
        <a-select v-model="form.brandId" placeholder="请选择小程序">
          <a-select-option v-for="(item, index) in regionList" :key="index" :value="item.key"> {{ item.value }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="活动时间" required prop="startTime">
        <a-range-picker :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD HH:mm:ss" :value="[form.startTime, form.endTime]" @change="timeChange" show-time type="date" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="参活人群" prop="isCheck">
        <a-radio-group v-model="form.isCheck">
          <a-radio value="N"> 不限 </a-radio>
          <a-radio value="Y"> 指定人群 </a-radio>
        </a-radio-group>
        <div v-show="form.isCheck == 'Y'">
          <PopulationType
            @storeGroupId="storeGroupId"
            :storeGroupId="form.storeGroupId"
            @selectedTags="selectedTags"
            :dataList="dataList"
            :infoList="infoList"
            @maxAwardType="maxAwardType"
            @storeGroupType="storeGroupType"
            @crowdType="crowdType"
            :populationId="populationId"
            @dataChange="dataChange"
            @crowdChange="crowdChange"
          ></PopulationType>
        </div>
      </a-form-model-item>
      <a-form-model-item label="活动类型" prop="recommendType">
        <a-select v-model="form.recommendType" placeholder="请选择活动类型" :getPopupContainer="triggerNode => triggerNode.parentNode">
          <a-select-option value="0"> 推荐会员 </a-select-option>
          <!-- <a-select-option value="1"> 推荐访客 </a-select-option> -->
        </a-select>
      </a-form-model-item>
      <a-form-model-item prop="relationType" class="label">
        <template v-slot:label>
          被邀请人归属关系是<br />
          否和邀请人一致
        </template>
        <a-radio-group v-model="form.relationType" style="margin-top: 18px">
          <a-radio value="1"> 仅门店一致 </a-radio>
          <a-radio value="2"> 门店&导购一致 </a-radio>
          <a-radio value="3"> 无需一致 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="活动页面海报" prop="poster">
        <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" @fileChange="fileChange" v-model="indexImg"></JImageUpload>
        <p>支持PNG, JPG和GIF格式，大小不超过1M</p>
      </a-form-model-item>
      <a-form-model-item label="推广图" prop="shareBgImg">
        <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" @fileChange="posterChange" v-model="shareBgImg"></JImageUpload>
        <p>支持PNG, JPG和GIF格式，大小不超过1M</p>
      </a-form-model-item>
      <a-form-model-item label="活动规则" prop="ruleDesc">
        <a-input v-model="form.ruleDesc" type="textarea" style="height: 60px" :maxLength="1000" />
      </a-form-model-item>
      <a-form-model-item label="页面颜色按钮" prop="shareBtnColor">
        <div style="position: relative">
          <a-input v-model="form.shareBtnColor" :maxLength="8" />
          <div id="baseexample" :style="{ backgroundColor: form.shareBtnColor }"></div>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import moment from 'moment'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import PopulationType from './populationType'
import { lvlGroupId, queryPeoPle } from '@/api/marketingCenter/passenger.js'
export default {
  components: {
    JImageUpload,
    PopulationType
  },
  props: {
    lvlGroup: String
  },
  data() {
    let validatePicture = (rule, value, callback) => {
      if (!this.form.shareBgImg) {
        callback(new Error('请上传推广图'))
      } else {
        callback()
      }
    }
    let validatePoster = (rule, value, callback) => {
      if (!this.form.indexImg) {
        callback(new Error('请上传海报图'))
      } else {
        callback()
      }
    }
    return {
      moment,
      populationId: this.$route.params.id,
      indexImg: '',
      shareBgImg: '',
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      dataList: [],
      infoList: [],
      dataInfoList: [],
      crowdList: [],
      form: {
        name: '',
        brandId: null,
        startTime: null,
        endTime: null,
        isCheck: 'N',
        recommendType: '',
        relationType: '',
        indexImg: '',
        shareBgImg: '',
        ruleDesc: '',
        shareBtnColor: '#',
        storeGroupId: '',
        selectedTags: '',
        crowdList: ''
      },
      rules: {
        name: [{ required: true, message: '请填入活动名称', trigger: 'blur' }],
        brandId: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
        isCheck: [{ required: true, message: '请选择参活人群', trigger: 'change' }],
        recommendType: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
        relationType: [{ required: true, message: '请选择被邀请人归属关系是否和邀请人一致', trigger: 'change' }],
        ruleDesc: [{ required: true, message: '请选择活动规则', trigger: 'change' }],
        shareBtnColor: [
          { required: true, message: '请填入页面颜色按钮', trigger: 'change' },
          { pattern: '^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$', message: '请输入十六进制色号' }
        ],
        shareBgImg: [{ required: true, validator: validatePicture, trigger: 'change' }],
        poster: [{ required: true, validator: validatePoster, trigger: 'change' }]
      },
      regionList: [
        {
          value: 'JNBY',
          key: '2738574294'
        },
        {
          value: '速写CROQUIS',
          key: '2504948039'
        },
        {
          value: 'Pomme de terre',
          key: '6924108367'
        },
        {
          value: 'LESS',
          key: '2822095692'
        },
        {
          value: 'jnby by JNBY',
          key: '4'
        },
        {
          value: 'JNBYHOME',
          key: '8348044436'
        },
        {
          value: '江南布衣+',
          key: '5'
        },

        {
          value: '江南布衣官方Outlet',
          key: '11'
        },

        {
          value: 'APN73',
          key: '15'
        }
      ]
    }
  },

  methods: {
    _lvlGroup(id) {
      lvlGroupId(id).then(res => {
        if (res.code === 200) {
          this.dataList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    _vipGroupId(id) {
      queryPeoPle(id).then(res => {
        if (res.code === 200) {
          this.infoList = res.data.map(item => item.peoplePackageId)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    timeChange(dates, dateString) {
      this.form.startTime = dateString[0]
      this.form.endTime = dateString[1]
    },
    storeGroupId(val) {
      this.form.storeGroupId = val
    },
    selectedTags(val) {
      this.form.selectedTags = val
    },
    maxAwardType(val) {
      this.form.maxAwardType = val
    },
    storeGroupType(val) {
      this.form.storeGroupType = val
    },
    crowdType(val) {
      this.form.crowdType = val
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileChange(list) {
      this.form.indexImg = list[0].url
    },
    posterChange(list) {
      this.form.shareBgImg = list[0].url
    },
    dataChange(val) {
      this.dataInfoList = val
    },
    crowdChange(val) {
      this.form.crowdList = val
    },
    onSubmit() {
      if (this.form.isCheck == 'Y') {
        if (!this.form.storeGroupType && !this.form.maxAwardType && !this.form.crowdType) {
          this.$message.warning('请至少选择一个指定人群')
          return
        }
        console.log(this.form.maxAwardType, 'this.form.maxAwardType')
        if (this.form.maxAwardType) {
          if (!this.form.selectedTags) {
            this.$message.warning('请选择集团卡等级')
            return
          }
          if (this.form.selectedTags.length < 1) {
            this.$message.warning('请选择集团卡等级')
            return
          }
        }
        if (this.form.storeGroupType) {
          if (this.dataInfoList.length < 1) {
            this.$message.warning('请导入门店')
            return
          }
        }
        if (this.form.crowdType) {
          if (this.form.crowdList.length < 1) {
            this.$message.warning('请选择人群包')
            return
          }
        }
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('oneData', this.form)
          this.$emit('one', 1)
        } else {
          return false
        }
      })
    },
    setData(data) {
      this.shareBgImg = data.shareBgImg
      this.indexImg = data.indexImg
      this.form = data
      this.form.storeGroupType = this.form.storeGroupId ? true : false
      this.form.maxAwardType = this.form.lvlGroupId ? true : false
      this.form.relationType = data.relationType.toString()
      this.form.recommendType = data.recommendType.toString()
      if (this.form.lvlGroupId) {
        this._lvlGroup(this.form.lvlGroupId)
      }
      if (this.form.vipGroupId) {
        this._vipGroupId(this.form.vipGroupId)
      }
    }
  }
}
</script>
<style  scoped lang="less">
.box {
  margin-top: 24px;
}
#baseexample {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 18%;
  right: 2%;
}
.edit-wide {
  width: 240px;
}
/deep/ .label .ant-col-5 {
  line-height: 25px !important;
  padding-right: 5px !important;
}
</style>